<template>
  <div>
    <van-search placeholder="请输入搜索关键词" />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <van-grid :column-num="5">
      <van-grid-item icon="like-o" text="超市遍历" />
      <van-grid-item icon="star-o" text="菜市场" />
      <van-grid-item icon="phone-o" text="文字" />
      <van-grid-item icon="setting-o" text="文字" />
      <van-grid-item icon="fire-o" text="文字" />
      <van-grid-item icon="gem-o" text="文字" />
      <van-grid-item icon="cart-o" text="文字" />
      <van-grid-item icon="bag-o" text="文字" />
      <van-grid-item icon="smile-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid>
    
    <h2>附近店铺</h2>
    <div v-for="item in list" :key="item.id">
      <ListItem :item="item"></ListItem>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue';
import ListItem from './components/ListItem/index.vue'

// 定义一个数组
const list = ref([])

const getDate = () =>{
  axios.get('/api/list').then(res =>{
    console.log(res);
    if(res.status === 200){
      list.value = res.data
    }
  })
}

onMounted(()=>{
  getDate()
})

</script>

<style lang="scss" scoped>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }

  dl{
    display: flex;

    dd{
      padding-left: 10px;
    }
  }
</style>
